<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" :content="'批量开票'" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <div class="steps">
          <div class="steps_" :class="{ colorStyle1: show === 1 }">
            <div class="step-item">确认订单</div>
          </div>
          <div class="steps_" :class="{ colorStyle2: show === 2 }">
            <div>
              <span class="circle"></span>
              <span class="circle" style="margin-left: 5px"></span>
            </div>
            <p class="step-item">确认开票信息</p>
          </div>
          <div class="steps_" :class="{ colorStyle3: show === 3 }">
            <div>
              <span class="circle"></span>
              <span class="circle" style="margin-left: 5px"></span>
            </div>
            <div class="step-item">上传附件</div>
          </div>
        </div>

        <el-row v-if="show === 1">
          <el-col :span="24">
            <div>
              <h3 class="order-money">
                订单总额：<span style="color: red">{{ `￥${price}  元` }}</span>
              </h3>
            </div>
          </el-col>
          <el-col :span="24">
            <div>订单列表</div>
          </el-col>
          <el-col>
            <JADP-table style="margin-top: 20px" :data="invoiceData">
              <el-table-column
                prop="orderno"
                label="订单号"
                align="center"
                width="100"
              >
                <template #default="{ row }">
                  <ShowAllText :row="row.orderno" :num="8" />
                </template>
              </el-table-column>
              <el-table-column label="发票抬头">
                <template #default="{ row }">
                  {{ row.studentsEntity.invoicetitle }}
                </template>
              </el-table-column>
              <el-table-column label="税号" width="100">
                <template #default="{ row }">
                  <ShowAllText
                    :row="row.studentsEntity.dutyparagraph"
                    :num="8"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="realname"
                label="学员"
                align="center"
                width="90"
              >
                <template #default="{ row }">
                  {{ row.studentsEntity.realname }}
                </template>
              </el-table-column>
              <el-table-column prop="classname" label="班级名称" align="center">
                <template #default="{ row }">
                  {{ row.classInfoEntity.classname }}
                </template>
              </el-table-column>
              <el-table-column prop="trainType" label="培训类别" align="center">
                <template #default="{ row }">
                  {{ getDict("pxlb", row.classInfoEntity.trainType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="categorytype"
                label="培训行业"
                align="center"
                width="130"
              >
                <template #default="{ row }">
                  {{ getDict("hangye", row.classInfoEntity.categorytype) }}
                </template>
              </el-table-column>
              <el-table-column prop="trainMode" label="培训类型" align="center">
                <template #default="{ row }">
                  {{ getDict("bjpxfs", row.classInfoEntity.trainMode) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="traindateStart"
                label="培训开始"
                align="center"
              >
                <template #default="{ row }">
                  {{
                    dayjs(row.classInfoEntity.traindateStart / 1).format(
                      "YYYY-MM-DD"
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="traindateEnd"
                label="培训截止"
                align="center"
              >
                <template v-slot="{ row }">
                  {{
                    dayjs(row.classInfoEntity.traindateEnd / 1).format(
                      "YYYY-MM-DD"
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column prop="accountstatus" label="价格" align="center">
                <template #default="{ row }">
                  {{ row.classInfoEntity.traincharge }}
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="订单状态"
                align="center"
                width="150"
              >
                <template #default="{ row }">
                  <el-tag :type="handlerStatus(row.orderstatus)">{{
                    row.orderstatus
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="发票状态" width="85">
                <template #default="{ row }">
                  {{
                    row.invoicestatus
                      ? getDict("fpzt", row.invoicestatus)
                      : row.invoicestatus
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="creatortime"
                label="报名时间"
                align="center"
                width="160"
              >
                <template #default="{ row }">
                  {{
                    dayjs(row.classInfoEntity.creatortime / 1).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ $index }">
                  <el-button
                    type="text"
                    class="JADP-table-delBtn"
                    @click="deleteData($index)"
                    >移除
                  </el-button>
                </template>
              </el-table-column>
            </JADP-table>
          </el-col>
        </el-row>
        <div v-if="show === 2" class="tab2">
          <el-form>
            <el-col :span="24" class="invoice-info"> 邮寄信息 </el-col>
            <el-col :span="24">
              <el-form-item label="收票人">
                <el-input v-model="form.consignee" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系电话">
                <el-input v-model="form.consigneephone" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址">
                <el-input v-model="form.consigneeaddress" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24" class="invoice-info"> 发票信息 </el-col>
            <el-col :span="24">
              <el-form-item label="配送方式">
                <el-select v-model="form.deliverymode" disabled>
                  <el-option
                    v-for="(item, index) in getDict('postType')"
                    :key="index"
                    :label="item.dataName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票抬头">
                <el-input v-model="form.invoicetitle" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="税号">
                <el-input v-model="form.dutyparagraph" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单位地址">
                <el-input v-model="form.unitaddress" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="电话号码">
                <el-input v-model="form.telephone" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开户银行">
                <el-input v-model="form.bank" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="银行卡号">
                <el-input v-model="form.consigneephone" readonly></el-input
              ></el-form-item>
            </el-col>
          </el-form>
        </div>
        <div v-if="show === 3" class="tab3">
          <el-form
            v-if="show === 3"
            :model="form"
            size="small"
            :rules="rules"
            label-width="140px"
            ref="form"
          >
            <!-- <el-col :span="24" class="invoice-info"> 邮寄信息 </el-col> -->
            <el-col :span="24">
              <el-form-item label="收票人" prop="consignee">
                <el-input v-model="form.consignee" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系电话" prop="consigneephone">
                <el-input v-model="form.consigneephone" readonly></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="consigneeaddress">
                <el-input v-model="form.consigneeaddress" readonly></el-input
              ></el-form-item>
            </el-col>
            <!-- <el-col :span="24" class="invoice-info"> 发票信息 </el-col> -->
            <el-col :span="24">
              <el-form-item label="发票状态" prop="invoicestatus">
                <el-select v-model="form.invoicestatus">
                  <el-option
                    v-for="(item, index) in getDict('fpzt')"
                    :key="index"
                    :label="item.dataName"
                    :value="item.id"
                  ></el-option> </el-select
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开票寄出时间" prop="invoicingtime">
                <el-date-picker
                  v-model="form.invoicingtime"
                  type="datetime"
                  placeholder="请选择寄出日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  value-format="timestamp"
                ></el-date-picker
              ></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票快递信息" prop="invoiceinfo">
                <el-input v-model="form.invoiceinfo" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票附件" prop="invoiceatta">
                <span class="upload-btn" @click="uploadFile">
                  &nbsp; &nbsp;上传/查看附件</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发票内容" prop="invoicecontent">
                <el-input v-model="form.invoicecontent" clearable></el-input
              ></el-form-item>
            </el-col>
          </el-form> 
        </div>
      </el-row>
      <div
        style="width: 100%; height: 50px; padding-top: 5px; text-align: center"
      >
        <div class="foot">
          <el-button type="primary" @click="goBack">返回列表</el-button>
          <el-button type="primary" v-if="show !== 1" @click="show--"
            >上一步</el-button
          >
          <el-button type="primary" v-if="show !== 3" @click="show++"
            >下一步</el-button
          >
          <el-button type="primary" v-if="show == 3" @click="saveRelease"
            >开票</el-button
          >
        </div>
      </div>
      <Upload
        :visible.sync="uploadVisible"
        :fileSize="500"
        v-model="form.invoiceatta"
        :invoice="true"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  props: [],
  data() {
    return {
      invoiceData: [],
      show: 1,
      form: {
        consignee: "",
        consigneephone: "",
        consigneeaddress: "",
        deliverymode: "",
        invoicestatus: "",
        invoicingtime: "",
        invoiceinfo: "",
        invoiceatta: "",
        invoicecontent: "",
        invoicetitle: "",
        dutyparagraph: "",
        unitaddress: "",
        telephone: "",
        bank: "",
        bankaccount: "",
      },
      rules: {
        invoicestatus: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        invoicingtime: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        invoiceinfo: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        invoiceatta: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
        invoicecontent: [
          {
            required: true,
            message: "必填",
            trigger: "change",
          },
        ],
      },
      uploadVisible: false,
    };
  },
  computed: {
    handlerStatus() {
      return function (status) {
        let type;
        switch (status) {
          case "报名审核不通过":
            type = "danger";
            break;
          case "报名成功已完成付款":
            type = "success";
            break;
          case "提交报名等待审核":
            type = "warning";
            break;
          case "报名成功等待付款":
            type = "";
            break;
          default:
            type = "info";
        }
        return type;
      };
    },
    price: {
      get() {
        let price = 0;
        this.invoiceData.forEach((item) => {
          price += item.classInfoEntity.traincharge;
        });
        return price;
      },
      set() {
        // return 0;
      },
    },
  },
  methods: {
    deleteData(index) {
      this.invoiceData.splice(index, 1);
    },
    uploadFile() {
      this.uploadVisible = true;
    },
    init(data) {
      this.invoiceData = data;
      let form = this.invoiceData[0];
      for (let key in this.form) {
        for (let key1 in form) {
          if (key == key1) this.form[key] = form[key1];
        }
        for (let key2 in form.studentsEntity) {
          if (key == key2) {
            this.form[key] = form.studentsEntity[key2];
          }
        }
      }
      this.invoiceData.forEach((item) => {
        this.price += item.classInfoEntity.traincharge;
      });
    },
    async saveRelease() {
      let ids = this.invoiceData.map((item) => item.id).join(",");
      let data = {
        invoicestatus: "",
        invoicingtime: "",
        invoiceinfo: "",
        invoiceatta: "",
        invoicecontent: "",
      };
      for (let i in data) {
        if (!this.form[i]) {
          return this.$message.error("带 * 号为必填项");
        }
      }
      try {
        let res = await request({
          url: `/api/invoice/Xy_ks_invoice/batchKp/${ids}`,
          method: "put",
          data: this.form,
        });
        this.$message({
          type: "success",
          message: res.msg,
          duration: 800,
          onClose: () => {
            this.goBack();
            this.$emit("refresh", true);
          },
        });
      } catch {}
    },
    goBack() {
      this.$emit("refresh", true);
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-btn {
  cursor: pointer;
  &:hover {
    color: skyblue;
  }
}
.order-money {
  line-height: 60px;
  > span {
    color: red;
  }
}
::v-deep .el-input {
  width: 600px;
  font-size: 16px;
  text-indent: 0;
  .el-input__inner {
    border: none;
  }
}
.tab2,
.tab3 {
  padding: 10px 50px;
  .invoice-info {
    background: rgb(245, 245, 245);
    line-height: 50px;
  }
  ::v-deep .el-form-item__label {
    width: 230px;
    text-align: center;
    border-right: 1px solid rgb(242, 242, 242);
    margin-right: 70px;
  }
  .el-col {
    border: 1px solid rgb(242, 242, 242);
    border-top: none;
    box-sizing: border-box;
  }
  ::v-deep .el-col:nth-of-type(n + 2) {
    height: 50px;
    .el-form-item--small .el-form-item__content,
    .el-form-item--small .el-form-item__label {
      height: 100%;
      line-height: 50px;
    }
  }
}
.steps {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 22px;
  .steps_ {
    height: 40px;
    line-height: 40px;
    .circle {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      background: rgb(245, 247, 250);
    }
    width: 30%;
    display: flex;
    .step-item {
      // -webkit-box-flex: 1;
      // flex: 1;
      width: 100%;
      //   background: rgb(64, 158, 255);
      background: rgb(245, 247, 250);
      text-align: center;
      position: relative;
      -webkit-clip-path: polygon(
        0 0,
        calc(100% - 20px) 0,
        100% 50%,
        calc(100% - 20px) 100%,
        0 100%,
        20px 50%,
        0 0
      );
      &:nth-child(n + 2) {
        width: 92%;
        // &::before {
        //   content: "嘻嘻";
        //   width: 20px;
        //   height: 20px;
        //   position: relative;
        //   left: -40px;
        //   z-index: 1000000;
        //   color: green;
        //   top: 0;
        // }
      }
    }
  }
}
.colorStyle1,
.colorStyle2,
.colorStyle3 {
  .step-item {
    background: rgb(64, 158, 255) !important;
  }

  span {
    background: rgb(64, 158, 255) !important;
  }
  p {
    color: #fff;
  }
}
.foot {
  width: 380px;
  height: 35px;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  // ::v-deep .el-button {
  //   margin-right: 30px;
  // }
}
.btn,
.btn1 {
  width: 150px;
  height: 40px;
  color: #409eff;
  margin: 20px 0 0 20px;
  border-radius: 6px;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    color: #fff;
    background: rgb(64, 158, 255);
    border-color: rgb(64, 158, 255);
  }
}
.btn {
  width: 80px;
}
</style>
